@import '@styles/minx.scss';
@import '@styles/icon.font.scss';

.publish{
    &__textArea{
        min-height: 300px;
        font-size: 30px;
        padding: 15px 0
    }
    &__title{
        @include border(bottom,1px,solid,#ccc);
        @include flexBetween
    }
    &__title__input{
        padding: 8px 0 ;
        margin-top: 30px;
    }
    &__page{
        padding: 0 15px;
        height: 100%;
        background-color: #fff;
    }
    &__media__preview__swiperWrapper{
        height: 200px;
    }
    &__media__preview{
        @include flexStart;
    }
    &__media__preview__item{
        width: 200px;
        height: 200px;
        padding: 5px;
        &__image{
            width: 100%;
            height: 100%;
            border-radius: 6px;
        }
        &__deleteBtn{
            position: absolute;
            width: 38px;
            height: 38px;
            border-radius: 19px;
            background-color: rgba($color: #000000, $alpha: 0.5);
            top: 6px;
            right: 6px;

        }
        &__addMore{
            width: 100%;
            height: 100%;
            border-radius: 6px;
            border: 1px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    
    &__operateBar{
        position: absolute;
        width: 100%;
        bottom: 0;
       
       
    }
    &__topBar{
        @include flexBetween()
    }
    &__toolBar{
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 15px;
        @include border(top,1px,solid,#ccc);
        &__Icon{
            width: 60px;
            height: 60px;
            margin-right: 20px;

        }
    }
}
.deleteIcon{
    color: #fff;
    font-size: 38px;
    text-align: center;
}
.addMoreIcon{
    font-size: 80px;
}